<template>
    <div class="float-panel-container" ref="floatPanel" draggable="true" @dragstart="start"  @drag="move" :style="`transform:translate(${screenX}px,${screenY}px)`" @dragend="end">
        <el-collapse v-model="activeName">
            <el-collapse-item title="批量删除操作面板" name="1">
                <div class="header-panel">
                    <span>已选中列表</span>
                    <el-button type="warning" @click="clearSelected('all')">清空</el-button>
                    <el-button type="danger" @click="deleteSelected">全部删除</el-button>
                </div>
                <el-table
                    :data="selectedList"
                    style="width: 100%;height:300px;"
                    :highlight-current-row="true"
                    :border="true"
                >
                    <el-table-column prop="id" label="ID" width="80" :align="'center'" />
                    <el-table-column prop="title" label="名称" min-width="180" :align="'center'" />
                    <el-table-column prop="remove" label="移除" width="80"  :align="'center'">
                        <template #default="scope">
                            <div class="remove-btn">
                                <Icon icon="remove-item" size="30px" @click="clearSelected(scope.row.id)" />
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="btn-wrapper">
                    <el-button type="primary" @click="closePanel">关闭</el-button>
                </div>
            </el-collapse-item>
         </el-collapse>
    </div>
</template>

<script setup>
import { ref ,defineProps,defineEmits} from 'vue';  
import Icon from '@/components/Icon.vue';
import {ElTable,ElTableColumn,ElCollapse,ElCollapseItem,ElButton } from 'element-plus';
const activeName = ref('1');
const emit = defineEmits(['operateAll','closeOperatePanel']);
const screenX = ref(60);
const screenY = ref(60);
const floatPanel = ref(null);
let initialMouseOffsetX = 0;
let initialMouseOffsetY = 0;
const props = defineProps({
  selectedList:Array  
});
const deleteSelected = ()=>{
  emit('operateAll','delete');
}
const clearSelected = (id)=>{
    emit('operateAll',id);  
}
const closePanel = ()=>{
        emit('closeOperatePanel');
}
const start = (e)=>{
        initialMouseOffsetX = e.clientX - screenX.value;
        initialMouseOffsetY = e.clientY - screenY.value;
}
const move = (e)=>{
        console.log(e);
        screenX.value = e.clientX - initialMouseOffsetX;
        screenY.value = e.clientY - initialMouseOffsetY;

}
const end = (e)=>{
        screenX.value = e.clientX - initialMouseOffsetX;
        screenY.value = e.clientY - initialMouseOffsetY;
        let borderX = window.innerWidth * 0.88-400;
        let borderY = window.innerHeight * 0.85-floatPanel.value.clientHeight; 
        if(screenX.value < 0){
            screenX.value = 0;
        }
        if(screenY.value < 0){
            screenY.value = 0;
        }
        if(screenX.value >= borderX){
            screenX.value = borderX;
        }
        if(screenY.value >= borderY){
            screenY.value = borderY;
        }
}
</script>

<style scoped lang='scss'>
:deep(.el-collapse-item__header){
    display: inline-block !important;
}
.float-panel-container{
    width:400px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.695);
    position: absolute;
    z-index:100;
    padding:2px;
    border-radius: 5px;
    cursor: move;
}
.header-panel{
    display:flex;
    height:30px;
    align-items:center;
    justify-content:space-around;
    margin-bottom: 20px;;
}    
.remove-btn{
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-wrapper{
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
</style>